.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.map {
  flex: 1;
  position: relative;
}

.map #map {
  position: absolute;
  width: 100%;
  height: 100%;
}

.nav {
  height: 88rpx;
  display: flex;
  text-align: center;
  line-height: 88rpx;
  color: white;
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom);
}

.nav .publish {
  flex: 1;
  background-color: #f29a38;
}

.nav .search {
  flex: 1;
  background-color: #52b9d2;
}

.location-cover-image {
  width: 76rpx;
  height: 76rpx;
  position: absolute;
  left: 40rpx;
  bottom: 40rpx;
}

.pin-cover-image {
  width: 44rpx;
  height: 62rpx;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: calc(50% - 31rpx);
}